<template>
  <div class="reports">
    <div class="reports_const">
      <div id="main"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getReports } from "@/utils/http";
export default {
  data() {
    return {
      reports: {},
      myChart: null,
      dataOrders: {
        title: {
          text: "用户来源",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#E9EEF3",
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        yAxis: [
          {
            type: "value",
          },
        ],
      },
    };
  },
  mounted() {
    this.chartfn();
    //通过调用echarts的resize实现自适应
    window.addEventListener("resize", this.myChart.resize);
  },
  methods: {
    chartfn() {
      // 拿到当前dom
      var chartDom = document.getElementById("main");
      // 初始化echarts
      this.myChart = echarts.init(chartDom);
      // 拿到数据
      getReports().then((res) => {
        this.reports = res.data;
        // 生成图表
        let newdata = { ...this.reports, ...this.dataOrders };
        this.myChart.setOption(newdata);
      });
    },
  },
  created() { },
};
</script>

<style lang="scss" scoped>
.reports {
  background: white;
  padding: 10px;
  border-radius: 8px;

  #main {
    width: 100%;
    height: 580px;
  }
}
</style>